<template>
  <!-- 查询 -->
  <div>
    <el-input placeholder="请输入客户ID" style="width:200px" v-model="queryCustomerId"></el-input>
    <el-button @click="queryByCustomerId" type="success" plain>查询</el-button>
    <el-button @click="showNursingDialog" type="primary" style="width: 100px; margin-left: 50px;font-weight: bolder; font-size: 16px">
      新增
    </el-button>
  </div>
  <!-- 显示所有护理记录信息 table自动循环 -->
  <div>{{errorMessage}}</div>
  <el-table :data="nursingList">
    <el-table-column label="序号" type="index" width="60px"></el-table-column>
    <el-table-column prop="customerId" label="客户ID" width="80px"></el-table-column>
    <el-table-column prop="itemId" label="护理项目ID" width="100px"></el-table-column>
    <el-table-column prop="nursingTime" label="护理时间" width="150px" :formatter="formatDate"></el-table-column>
    <el-table-column prop="nursingContent" label="护理内容" width="200px"></el-table-column>
    <el-table-column prop="nursingCount" label="护理数量" width="80px"></el-table-column>
    <el-table-column prop="userId" label="护理人员ID" width="100px"></el-table-column>
    <el-table-column >
      <template #default="scope">
      </template>
    </el-table-column>
  </el-table>

  <div class="example-pagination-block">
    <el-pagination background
                   v-model:current-page="pageContains.pageNum"
                   v-model:page-size="pageContains.pageSize"
                   :page-sizes="[10,20,30,50,100]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="pageContains.total"
                   @size-change="handleSizeChange"
                   @current-change="handlePageChange"
    />
  </div>

  <!-- 护理记录对话框 -->
  <el-dialog v-model="nursingDialog" :title="dialogTitle">
    <el-form :model="curNursing">
      <el-form-item label="客户ID">
        <el-col :span="11">
          <el-input v-model="curNursing.customerId"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="护理项目ID">
        <el-col :span="11">
          <el-input v-model="curNursing.itemId"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="护理时间">
        <el-col :span="11">
          <el-date-picker v-model="curNursing.nursingTime" type="datetime"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="护理内容">
        <el-col :span="11">
          <el-input v-model="curNursing.nursingContent"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="护理数量">
        <el-col :span="11">
          <el-input v-model="curNursing.nursingCount"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="护理人员ID">
        <el-col :span="11">
          <el-input v-model="curNursing.userId"></el-input>
        </el-col>
      </el-form-item>
    </el-form>
    <el-button @click="optNursing()">{{buttonOpt}}</el-button>
  </el-dialog>
</template>

<script setup>
import {ref, onMounted, reactive} from "vue";
import http from '@/axios/http';
import qs from "qs";
// 存放护理记录数据集合
let nursingList = ref([]);

//报错提示
let errorMessage = ref("")

//模糊查询绑定的 客户ID
let queryCustomerId = ref("")

//对话框显示控制
let nursingDialog = ref(false)

//护理记录信息，或者编辑已有护理记录的 绑定数据
let curNursing = ref({});

//登记、修改护理记录弹出框的 标题和操作按钮  显示文字
let dialogTitle = reactive("")
let buttonOpt = reactive("")

//对话框操作类型：1：添加 2：编辑
let dialogOptType = reactive(1)
let size = 10; //当前显示多少行
let pageNum = 1; // 当前页码
let pageSize = 10; //每页显示行数

//当前页码信息
let pageContains = ref({})

//根据客户ID模糊查询护理记录信息
function queryByCustomerId() {
  let param = {
    customerId: queryCustomerId.value
  }
  http.post('/lyy/get_nursing_by_customer_id', param).then(
      (res) => {
        let result = res.data;
        // 返回结果传给 nursingList
        if (result.result === 'success') {
          nursingList.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

//单击新增按钮事件
function showNursingDialog() {
  dialogTitle = "新增护理记录";
  buttonOpt = "新增"
  //弹出护理记录对话框
  nursingDialog.value = true;
  dialogOptType = 1 //设置当前操作类型标志是 新增
}

//关闭护理记录对话框
function closeNursingDialog() {
  nursingDialog.value = false;
}

//页面初始化
onMounted(
    () => {
      init();
    }
)

function init() {
  //查询所有护理记录信息
  getAllNursing();
}

function getAllNursing() {
  let params = ref({
    size: size,
    pageNum: pageNum,
    pageSize: pageSize
  })
  http.post('/lyy/get_all_nursing', params.value).then(
      (res) => {
        let result = res.data;
        // 返回结果传给 nursingList
        if (result.result === 'success') {
          pageContains.value = result.data;
          nursingList.value = result.data.list;
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

//格式化日期
function formatDate(row, column) {
  let data = row[column.property];
  if (data == null) {
    return null;
  }
  let dt = new Date(data);
  return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds();
}

//新增护理记录
function addNursing() {
  let param = curNursing.value;
  http.post('/lyy/add_one_nursing', param).then(
      (res) => {
        let result = res.data;
        // 返回结果传给 nursingList
        if (result.result === 'success') {
          //关闭对话框
          closeNursingDialog()
          //刷新护理记录列表
          getAllNursing();
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

//显示编辑护理记录对话框
function showEditNursingDialog(Id) {
  //根据id查询护理记录信息
  getNursingInfo(Id)
  //显示对话框
  console.log(Id)
  nursingDialog.value = true;
  dialogTitle = "编辑护理记录";
  buttonOpt = "修改"
  dialogOptType = 2 //设置当前操作类型标志是 修改
}

function getNursingInfo(id) {
  let param = {
    id: id
  }
  http.post('/lyy/get_nursing_by_id', qs.stringify(param)).then(
      (res) => {
        let result = res.data;
        // 返回结果传给 curNursing
        if (result.result === 'success') {
          curNursing.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

//删除护理记录
function removeNursing(Id) {
  let param = {
    Id: Id
  }
  http.post('/lyy/remove_nursing_by_id', qs.stringify(param)).then(
      (res) => {
        let result = res.data;
        // 返回结果传给 nursingList
        if (result.result === 'success') {
          getAllNursing();
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

//编辑护理记录
function editNursing() {
  let param = curNursing.value;
  http.post('/lyy/modify_nursing_by_id', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          //curNursing.value = result.data;
          closeNursingDialog();
          getAllNursing();
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

function optNursing() {
  if (dialogOptType === 1) {
    addNursing()
  } else if (dialogOptType === 2) {
    editNursing()
  }
}

//分页处理
const handlePageChange = (pageNum1) => {
  pageNum = pageNum1
  getAllNursing()
}

const handleSizeChange = (pageSize1) => {
  pageSize = pageSize1
  getAllNursing()
}
</script>

<style scoped>

</style>